<template>
  <!--一级标题-->
  <el-row id="app-head-menu">
    <el-menu ref="mainMenu"
             :default-active="currentIndex"
             mode="horizontal"
             background-color="#333333"
             text-color="#fff"
             active-text-color="#fff"
             @select="handleSelect">
      <el-menu-item index="1" title="数据看板">
        <i class="iconfont iconyibiao"></i>
        <span>数据看板</span>
      </el-menu-item>
      <el-menu-item index="2" title="设备管理">
        <i class="iconfont iconweixianyuanjiance"></i>
        <span>设备管理</span>
      </el-menu-item>
      <el-menu-item index="3" title="计量器具">
        <i class="iconfont iconfenqu"></i>
        <span>计量器具</span>
      </el-menu-item>
      <el-menu-item index="4" title="采集数据">
        <i class="iconfont iconxunjian_renyuandingwei"></i>
        <span>采集数据</span>
      </el-menu-item>
      <el-menu-item index="5" title="能耗管理">
        <i class="iconfont iconliucheng"></i>
        <span>能耗管理</span>
      </el-menu-item>
      <el-menu-item index="6" title="告警中心">
        <i class="iconfont iconkeranqitiyujing"></i>
        <span>告警中心</span>
      </el-menu-item>
      <el-menu-item index="7" title="策略中心">
        <i class="iconfont iconyibiao"></i>
        <span>策略中心</span>
      </el-menu-item>
      <el-menu-item index="8" title="系统管理">
        <i class="iconfont iconrenyuanguanli"></i>
        <span>系统管理</span>
      </el-menu-item>
      <el-menu-item v-if="isViewShow" index="10" title="大屏">
        <i class="iconfont icontiaodu1"></i>
        <span>大屏</span>
      </el-menu-item>
    </el-menu>
  </el-row>

</template>

<script>
export default {
  props: {
    currentIndex: String
  },
  data() {
    return {
      activeIndex: 1,
      isViewShow: true
    }
  },
  mounted(){
    let obj = this.validateGlobal.getPermission(27)
    this.isViewShow = obj.isViewShow
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      if (key != 10) {
        this.activeIndex = toString(key)
      }
      if (key == 1) {
        this.$router.push({path:'/company'})
      }else if (key == 2){
        this.$router.push({path:'/DeviceManage'})
      }else if (key == 3) {
        this.$router.push({path:'/MeasureManage'})
      }else if (key == 4){
        this.$router.push({path:'/CollectDatas'})
      }else if (key == 5) {
        this.$router.push({path:'/PowerManage'})
      }else if (key == 6) {
        this.$router.push({path:'/WarnCenter'})
      }else if (key == 7) {
        this.$router.push({path:'/RulesCenter'})
      }else if (key == 8) {
        this.$router.push({path:'/SystemManage'})
      }else if (key == 10) {
        const goTo = this.$router.resolve({path: '/bigscreen'})
        window.open(goTo.href,'_blank')
        location.reload();
      }
    }
  }
}
</script>

<style lang="less">

  #app-head-menu{
    width: 1000px;

    .head-menu-bigscreen{
      height: 80px;
      /*width: 80px;*/
      border: 1px solid red;
    }

    .el-menu{
      display: inline-block;
      font-size: 14px;
      line-height: 80px;
      margin-left: 8px;
    }

    .el-menu--horizontal>.el-menu-item {
      height: 80px!important;
      line-height: 80px!important;
      margin: 0;
    }

    .el-menu-item {
      font-size: 18px;
      color: #303133;
      span {
        display: none;
      }
    }

    .el-menu--horizontal>.el-menu-item.is-active {
      border-bottom: 0px solid #409EFF;
      color: #303133;

      span{
        display: inline-block;
      }
    }

    .el-menu-item:focus, .el-menu-item:hover {
      outline: 0;
      background-color: #ecf5ff;
    }

    .el-menu-item, .el-submenu__title {
      height: 56px;
      line-height: 56px;
      position: relative;
      -webkit-box-sizing: border-box;
      white-space: nowrap;
      list-style: none;
    }

  }
</style>
